<template>
  <div class="subPage">
    <cover-view class='tipsOut'>
      <cover-image :src='cardFrontImg' class='img1'></cover-image>
    </cover-view>
    <mpvue-cropper
      ref="cropper"
      :option="cropperOpt"
      ></mpvue-cropper>
      <cover-view class='tipsOut2'>
        <cover-image :src='huadongImg' class='img2'></cover-image>
      </cover-view>
    <div
      class="cropper-buttons"
      :style="{ color:cropperOpt.boundStyle.color}">
      <div
        class="upload btn"
        @tap="uploadTap">
        选择图片
      </div>
      <div
        class="getCropperImage btn"
        :style="{ backgroundColor: cropperOpt.boundStyle.color}"
        @tap="getCropperImage">
        下一步
      </div>
    </div>
    <i-message id="message" />
  </div>
</template>

<script>
import MpvueCropper from 'mpvue-cropper'
import api from '@/api/api'
const { $Toast, $Message } = require('../../../../../static/iview/base');
let wecropper
const device = mpvue.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
export default {
  data () {
    return {
      cropperOpt: {
        id: 'cropper',
        targetId: 'targetCropper',
        pixelRatio: device.pixelRatio,
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (width - 315) / 2,
          y: (height - 185) / 2,
          width: 315,
          height: 185
        },
        boundStyle: {
          color: '#0088FF',
          mask: 'rgba(0,0,0,0.8)',
          lineWidth: 1
        }
      },
      chooseName: 'FRONT',
      imgUrl: '',
      cardFrontImg: '',
      huadong: ''
    }
  },

  components: {
    MpvueCropper
  },
  onLoad (options) {
    let that = this
    that.imgUrl = api.imgUrl
    that.cardFrontImg = that.imgUrl + 'cardFront.png'
    that.huadongImg = that.imgUrl + 'huadong.png'
    that.chooseName = options.type
    if (options.type === 'FRONT') {
      mpvue.setNavigationBarTitle({
        title: '身份认证-上传人像面',
      })
    } else if(options.type === 'BACK') {
      mpvue.setNavigationBarTitle({
        title: '身份认证-上传国徽面',
      })
    }
    that.uploadTap()
  },
  methods: {
    uploadTap () {
      mpvue.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          const src = res.tempFilePaths[0]
          console.log(res, 'chooseImage')
          if (res.tempFiles[0].size > 10000000) {
            $Message({
              content: '照片大小不得超过10M',
              type: 'warning'
            })
            return
          }
          //  获取裁剪图片资源后，给data添加src属性及其值
          wecropper.pushOrigin(src)
        }
      })
    },
    getCropperImage () {
      let that = this
      wecropper.getCropperImage({ original: true })
        .then((src) => {
					mpvue.getImageInfo({
					  src: src,
					  success (res) {
					    console.log(res, 'getCropperImage')
					  }
					})
          mpvue.setStorage({
            key:"imageInfo",
            data: {
              type: that.chooseName,
              imgSrc: src
            }
          })
          // wx.redirectTo({
          //   url: `/pages/thirdPage/child/real/main?type=${that.chooseName}&imgSrc=${src}`
          // })
          // that.$router.push(`/pages/thirdPage/child/real/main?type=${that.chooseName}&imgSrc=${src}`)
          mpvue.navigateBack(1)
        })
        .catch(e => {
          console.error('获取图片失败')
        })
    }
  },
  mounted () {
    wecropper = this.$refs.cropper
  }
}
</script>

<style scoped lang='less'>
  .tipsOut2 {
    position: absolute;
    left: 0;
    top: 65%;
    z-index: 999;
    text-align: center;
    width: 100%;
  }
  .tipsOut {
    position: absolute;
    left: 0;
    top: 20%;
    z-index: 999;
    text-align: center;
    width: 100%;
  }
  .img1 {
    height: 60px;
    display: inline-block;
    width: 247px;
  }
  .img2 {
    height: 30px;
    display: inline-block;
    width: 140px;
  }
  .textTips {
    display: inline-block;
    font-size:28rpx;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(255,255,255,1);
    background:rgba(1,1,1,1);
    border-radius:16px;
    opacity:0.65;
    color: #FFFFFF;
    text-align: center;
    z-index: 9999;
    overflow: auto;
  }
.cropper-wrapper{
    position: relative;
    height: 100%;
    background-color: #e5e5e5;
}

.cropper-buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    line-height: 100rpx;
}

.cropper-buttons .upload, .cropper-buttons .getCropperImage{
    text-align: center;
}

.cropper{
    position: absolute;
    top: 0;
    left: 0;
}

.cropper-buttons{
    background-color: rgba(0, 0, 0, 0.95);
}

  .btn{
    height: 30px;
    line-height: 30px;
    padding: 0 24rpx;
    border-radius: 2px;
    color: #ffffff;
  }
  .upload {
    background: #575757;
    color: #fff;
  }
</style>
